<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue路由</title>
</head>
<body>
<div id="app">

    <h1>{{msg}}</h1>
    <router-view></router-view>
<!--    获取路径?后面的值-->
    <router-link to="/users?deptid=21">用户管理link</router-link>
<!--    获取路径的参数 rest方式-->
    <router-link to="/emps/11/小陈">员工管理link</router-link>

</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script src="../js/axios.min.js"></script>
<script>

    const users = {
        template: "<div><h3>用户管理</h3></div>",
        data() {
            return {};
        },
        methods: {},
        created(){
            //获取路由路径中的参数  获取queryString中传递的参数
            <!--    获取路径?后面的值-->
            console.log(this.$route.query.deptid)
        }
    };
    const emps = {
        template: "<div><h3>员工管理</h3></div>",
        data() {
            return {};
        },
        methods: {},
        created(){
            <!--    获取路径的值rest风格-->
            console.log(this.$route.params.id)
            console.log(this.$route.params.name)
        }
    };

    //创建路由对象并定义路由规则
    const router = new VueRouter({
        routes: [
            {path: '/', redirect: 'emps'},//默认路由规则  redirect:路由的重定向
            {path: '/users', name: "users", component: users}, //path指定路径  component指定组件  name路由名称必须唯一
            {path: '/emps/:id/:name', name: "emps", component: emps}
        ],

    });
    const app = new Vue({
        el: "#app",
        data: {
            msg: "路由参数的传递"
        },
        methods: {
            test() {
                console.log("test");
                // this.$router.push("/users")//根据路径
                this.$router.push({name: "emps"})//根据名称[推荐]
            }
        },
        computed: {},
        components: {},
        router,
    })
</script>
